<template>
    <div>
        <el-card shadow="always" style="height: 750px;">
            <div slot="header" style="display: flex;justify-content: space-between;align-items: center">
                <div style="color: #FFFFFF;font-weight: 700">设备列表</div>
                <div style="font-size: 14px;color:#FFFFFF;">显示全部</div>
            </div>
            <div>
                <ul>
                    <li v-for="(item,index) in dataList"  :class="{active:currentIndex===index}" :key="index" @click="showBorder(index,item.id)" ref="show">
                        <el-card shadow="always">
                             <div>
                                 <span style="color: #1ab394">设备名称:</span>
                                 <span style="font-weight: 700;margin-left: 5px;">{{ item.name }}</span>
                             </div>
                             <div style="margin-top:20px;">
                                 <span style="color: #1ab394">设备地址码:</span>
                                 <span style="font-weight: 700;margin-left: 5px;">{{ item.addressCode }}</span></div>
                             <div style="margin-top: 20px;font-weight: 700">{{ item.isOnline }}</div>
                        </el-card>
                    </li>
                </ul>
            </div>
        </el-card>
    </div>
</template>

<script>
import  bus from '@/utils/bus'
export default {
    name: 'left',
    data() {
        return {
            dataList: [
                { name: '气象设备1', addressCode: '40192784', isOnline: '在线',id:1001 },
                { name: '气象设备2', addressCode: '40192784', isOnline: '离线',id:1002 },
                { name: '气象设备3', addressCode: '40192784', isOnline: '在线',id:1003 },
                { name: '气象设备4', addressCode: '40192784', isOnline: '在线',id:1004 },
            ],
            currentIndex:0
        }
    },
    methods:{
        showBorder(index,id){
            this.currentIndex = index
            bus.$emit('id',id)
        }
    }
}
</script>

<style scoped lang="scss">
ul {
    list-style: none;

    li {
        margin-top: 10px;
        margin-right: 30px;
        border-radius: 5px;
    }
    .active{
        border: 2px solid #1ab394;
    }
}

::v-deep .el-card__header {
    background-color: #1ab394;
    padding: 8px 15px 7px;
}
</style>
